{% extends 'admin/common/base.html' %}
{% block content %}

<div class="admin-index" style="height: 100%;">
    <div class="row" style="height: 100%;">
        <div class="col-sm-12">
            <div id="baidu_includes" style="height: 500px;"></div>
        </div>
    </div>
    
</div>
{% endblock %}
{% block js %}
{{ super() }}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("baidu_includes");
    var myChart = echarts.init(dom);
    var datas = {{ spinderIncludes | tojson(ensure_ascii = False) }};
    let rqs = [];
    let nums = [];

    datas.forEach(item => {
        rqs.push(item.time_label);
        nums.push(item.num);
    });

    option = null;
    option = {
        title: {
            text: '百度收录情况'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: rqs
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: nums,
            type: 'line',
            areaStyle: {}
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
{% endblock %}